<template>
	<view class="content">
		<view class="screen-swiper-box">
			<swiper class="screen-swiper" indicator-dots="true" circular="true" :autoplay="!autoplay"
				interval="3500" duration="500">
				<swiper-item >
					<video id="myVideo" :src="videoSrc" @play="BoFang()" @pause="ZanTing()" controls></video>
				</swiper-item>
				<swiper-item >
					<image class="swiperImage" :src="imageSrc" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				autoplay: false,
				videoSrc: 'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4',
				imageSrc: 'https://img-baofun.zhhainiao.com/market/133/2366564fa6b83158208eb3181752a8d6_preview.jpg'
			}
		},
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif
		},
		methods: {
			BoFang() {
				if (this.autoplay == false) {
					this.autoplay = true;
				}
			},
			ZanTing() {
				if (this.autoplay == true) {
					this.autoplay = false;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		position: absolute;
		
	}
	.content {
		width: 100%;
		height: 100%;
		
		.screen-swiper-box {
			position: relative;
			min-height: 375upx;
			width: 100%;
			.screen-swiper {
				
				width: 100%;
				position: absolute;
				height: 100%;
				.swiperImage {
					width: 100%;
					position: absolute;
					height: 100%;
				}
				#myVideo {
					width: 100%;
					position: absolute;
					height: 100%;
				}
			}
		}
	}
</style>

